<template>
  <div class="page has-headbar page-news-detail">
    <head-bar :title="this.$route.meta.title" :prevRoute="{name: 'live-list'}" />
    <section class="head">
      <h1 class="title">{{title}}</h1>
      <div class="info"><span class="author" v-if="author">{{author}}</span> <span class="time">{{time}}</span></div>
    </section>
    <div class="banner" v-if="banner"><img :src="banner"></div>
    <div class="html-content" v-html="content"></div>
  </div>
</template>

<script>
import { API_NEWS_DETAIL } from '@/service/news'
import dayjs from 'dayjs'
import { wxjsdkMixin } from '@/components/mixins'
import { getWechatLink } from '@/libs/utils'
export default {
  mixins: [wxjsdkMixin],
  name: 'live-detail',
  data () {
    return {
      title: '',
      author: '',
      time: '',
      content: '',
      banner: ''
    }
  },
  mounted () {
    this.wechatShowMenu()
    this.requestData().then(() => {
      let shareInfo = {
        title: this.title, // 分享标题
        desc: this.title,
        link: getWechatLink(window.location.hash), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: this.banner, // 分享图标
        success: function () {
          console.log('分享', getWechatLink(window.location.hash))
        }
      }
      this.wechatShare(shareInfo)
    })
  },
  methods: {
    requestData () {
      return API_NEWS_DETAIL(this.$route.params.id).then((data) => {
        // console.log(data)
        let info = data.info
        this.title = info.title
        this.author = info.author
        this.banner = info.imageUrl
        this.time = dayjs(dayjs.unix(info.create_at)).format('YYYY-M-D')
        this.content = info.content
        document.title = info.title
      })
    }
  }
}
</script>

<style lang="less">
.page-news-detail {
  padding: 0 12px 12px 12px;
  @import "../../assets/styles/newsdetail.less";
}
</style>
